<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>emoji</title>
  <script src="./emoji-list-with-image.js"></script>
  <script src="./emoji.js"></script>
  <script src="./punycode.js"></script>
  <script src="./jquery@3.3.1.min.js"></script>
  <style>
    ul li{list-style: none;}
    .clearfix{display: flex;}
  </style>
</head>

<body>
  <div class="text">
    <div id="content-icon" contenteditable="true" class="icon-area"></div>
    <button id="btn" class="btn btn-sm btn-default">:)</button>
    <div class="emoji-cont"></div>
    <!-- <textarea class="emoji-cont" name="" id="" cols="10" rows="100"></textarea> -->
  </div>
  <script>
    //生成emoji 并把emoji表情加载到emoji-cont中进行显示。
    $("#btn").click(function () {
      $(".emoji-cont").html("");
      $(".emoji-cont").stop().toggle();
      renderEmoji();
      $(".emoji-icon").each(function (k, v) {
        $(v).click(function () {
          var code = $(this).attr("unicode16");
          console.log(parse(code));
          $("#content-icon").append(parse("&#" + parseInt(code, 16) + ";"));
        });
      });
    });

    function renderEmoji() {
      var emos = getEmojiList()[0];
      var html = '<ul class="clearfix">';
      for (var j = 0; j < emos.length; j++) {
        var emo = emos[j];
        var data = 'data:image/png;base64,' + emo[2];
        if (j % 20 == 0) {
          html += '<li class="">';
        } else {
          html += '<li>';
        }
        html += '<img style="display: inline;vertical-align: middle;" src="' + data + '"  unicode16="' + emo[1] +
          '"  class="emoji-icon"  /></li>';
      }
      $(".emoji-cont").append(html);
    }

    //通过该方法。可以直接把表情在输入框中显示出来。  
    function parse(arg) {
      if (typeof ioNull != 'undefined') {
        return ioNull.emoji.parse(arg);
      }
      return '';
    };
  </script>
</body>

</html>